feat(home): Hero 캐러셀 자동회전 정지/제어 (WCAG 2.2.2) (#848)#916
Merged
Conversation
HeroDecodeBand의 HeroCarousel이 5초 간격으로 무한 자동회전하지만 사용자가 멈출 방법이 없었다(WCAG 2.2.2 Pause, Stop, Hide 위반). - 도트 옆에 보이는 pause/play 토글 버튼 추가 (aria-label + aria-pressed) - prefers-reduced-motion: reduce 시 기본 정지 + 런타임 변경 리스닝 - 포커스/호버 시(focus-within, hover) 자동회전 일시정지 - 회전 로직은 그대로(5s interval), 정지 조건만 추가 이 커밋은 #848 중 Hero-pause만; 개인화 피드·타이틀·streaming은 별도(#840 머지 후). 리뷰 반영: hydration 안전 초기화(paused 초기값 false + 마운트 후 matchMedia 반영) + APG aria(aria-pressed 제거, aria-label swap만 유지) Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배경
HeroCarousel이setInterval(5000)로 무한 자동회전하며 정지/제어 수단이 전무 → WCAG 2.2.2 (Pause, Stop, Hide) 위반.구현 (이 PR = #848의 (c) Hero-pause만)
paused/interacting(hover·focus) 상태 +isRotating = n>1 && !paused && !interacting.prefers-reduced-motion존중: 초기 정지 + 라이브matchMediachange 리스너(세션 중 OS 설정 플립 반영).useState(false)초기화 후 mount effect에서matchMedia반영(SSR/client 일치).스코프 (중요)
이 PR은 #848 중 (c) Hero-pause만 구현. (a)홈 개인화 피드 · (b)섹션 타이틀 정직화 · (d)홈 Suspense 스트리밍은
app/[locale]/(shell)/page.tsx가 열린 draft PR #872(#840)와 충돌 → #840 머지 후 후속 슬라이스. → #848 이슈는 이 PR로 완전 close하지 않음(부분).검증
Refs #848
2축 독립 리뷰 완료(작성/리뷰 분리).
🤖 Generated with Claude Code